<html>
<head>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        .img-item{
            margin: 10px;
            position: relative;
            z-index: 1;
        }
        .close
        {
            position: absolute;
            top: -10px;
            right: -10px;
            z-index: 999;
            background-color: #fff;
        }
    </style>
</head>
<body>

<form class="layui-form" action="" style="margin-top: 20px;margin-right: 30px;">

    <input type="hidden" name="id" value="{$data.id}">
    <div class="layui-form-item">
        <label class="layui-form-label">官方二维码</label>
        <div class="layui-input-block" >
            <button type="button" class="layui-btn" id="test1">
                <i class="layui-icon">&#xe67c;</i>选择图片
            </button>
        </div>
        <div id="img" style="display: flex;margin-left: 100px; flex-wrap: wrap">
            {volist name='data.images' id="vo"}
            <div class='img-item'>
                <img src='{$vo}' style='width: 120px;'>
                <img src='/image/close.png' style='width: 20px;' class='close' onclick='delete1(this)'>
                <input type='hidden' name='images[]' value='{$vo}'/>
            </div>
            {/volist}
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
        </div>
    </div>
</form>


<script src="/js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="/layui/layui.js"></script>
<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;
        form.render();

        //监听提交
        form.on('submit(formDemo)', function(data){
            var data = data.field;

            $.post("/ops/company/slider", data, function (res) {
               var res = JSON.parse(res);
               if(res.errno==0){
                   layer.msg('操作成功')
               }

                window.parent.location.reload();
            });
            return false;
        });
    });
    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '/ops/company/upload', //上传接口
            field: 'image'
            ,done: function(res){
                // var data = JSON.parse(res)
                var data = res;
                if(data.errno == 0){
                    var str = "<div class='img-item'><img src='"+data.data.url+"' style='width: 120px;'><img src='/image/close.png' style='width: 20px;' class='close' onclick='delete1(this)'>"
                    str += "<input type='hidden' name='images[]' value='"+data.data.url+"'/></div>"

                    $('#img').append(str);
                }else {
                    alert(data.errmsg);
                }

            }
            ,error: function(){
                //请求异常回调
            }
        });
    });

    function delete1(a){
        $(a).parent().remove()
    }

</script>


</body>
</html>

